<template>
  <div class="training-class-student-management">
    <!-- 1. 培训班信息区域 -->
    <div class="class-info">
      <h3>培训班信息</h3>
      <div class="info-grid">
        <div class="info-item" v-for="(item, index) in classInfo" :key="index">
          <span class="label">{{ item.label }}：</span>
          <span class="value">{{ item.value }}</span>
        </div>
      </div>
    </div>

    <!-- 2. 上下结构：学员报名库（上） + 进班学员列表（下） -->
    <div class="middle-section">
      <!-- 学员报名库（上栏 - 满宽） -->
      <el-row class="section-row">
        <el-col :span="24">
          <div class="student-container">
            <h3>内训学员库</h3>


            <!-- 新搜索栏：使用el-form表单 -->
            <el-form :model="poolForm" ref="poolForm" class="search-form" label-width="70px">
              <el-form-item label="姓名">
                <el-input
                  v-model="poolForm.name"
                  placeholder="请输入姓名"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input
                  v-model="poolForm.phone"
                  placeholder="请输入手机号码"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item label="证件编号">
                <el-input
                  v-model="poolForm.idCard"
                  placeholder="请输入证件编号"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item label="用户类型">
                <el-input
                  v-model="poolForm.userType"
                  placeholder="请选择用户类型"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="searchPoolStudents"
                  class="search-btn"
                >
                  搜索
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="default"
                  @click="resetPoolForm"
                  class="reset-btn"
                >
                  重置
                </el-button>
              </el-form-item>
              <el-form-item class="batch-btn-item">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  @click="handleBatchEnterClass"
                  class="batch-btn"
                >
                  批量进班
                </el-button>
              </el-form-item>
            </el-form>

            <!-- 学员报名库表格 -->
            <div class="table-container">
              <el-table
                :data="paginatedStudentPool"
                border
                style="width: 100%"
                @selection-change="handlePoolSelectionChange"
                size="mini"
                class="student-table"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                <el-table-column prop="idCard" label="证件编号" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gender" label="性别" width="70"></el-table-column>
                <el-table-column prop="phone" label="电话" width="130"></el-table-column>
                <el-table-column prop="qualification" label="学历" width="80">
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.pxzx_xl"
                      :value="scope.row.qualification"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="unitName" label="单位" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="position" label="职务职级" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="120">
                  <template #default="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="handleEnterClass(scope.row)"
                      class="operation-btn"
                    >
                      <i class="el-icon-arrow-right"></i> 进班
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
              <span>共 {{ studentPoolPage.total }} 条</span>
              <el-select
                v-model="studentPoolPage.pageSize"
                @change="handlePoolSizeChange"
                size="small"
                class="page-size-select"
              >
                <el-option label="10条/页" value="10"></el-option>
                <el-option label="20条/页" value="20"></el-option>
                <el-option label="50条/页" value="50"></el-option>
              </el-select>
              <el-pagination
                @current-change="handlePoolPageChange"
                :current-page="studentPoolPage.currentPage"
                :page-size="studentPoolPage.pageSize"
                layout="prev, pager, next, jumper"
                :total="studentPoolPage.total"
                size="small"
              ></el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 进班学员列表（下栏 - 满宽）：统一样式 -->
      <el-row class="section-row">
        <el-col :span="24">
          <div class="student-container">
            <h3>进班学员列表</h3>

            <!-- 搜索栏：与内训学员库保持一致结构 -->
            <el-form :model="enteredForm" ref="enteredForm" class="search-form" label-width="70px">
              <el-form-item label="姓名">
                <el-input
                  v-model="enteredForm.name"
                  placeholder="请输入姓名"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item label="证件编号">
                <el-input
                  v-model="enteredForm.idCard"
                  placeholder="请输入证件编号"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input
                  v-model="enteredForm.phone"
                  placeholder="请输入手机号码"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item label="用户类型">
                <el-input
                  v-model="enteredForm.userType"
                  placeholder="请选择用户类型"
                  clearable
                  size="small"
                  class="search-input"
                />
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="searchEnteredStudents"
                  class="search-btn"
                >
                  搜索
                </el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="default"
                  @click="resetEnteredForm"
                  class="reset-btn"
                >
                  重置
                </el-button>
              </el-form-item>
              <el-form-item class="batch-btn-item">
                <el-button
                  type="primary"
                  icon="el-icon-minus"
                  @click="handleBatchExitClass"
                  class="batch-btn exit-btn"
                >
                  批量退班
                </el-button>
              </el-form-item>
            </el-form>

            <!-- 进班学员表格 -->
            <div class="table-container">
              <el-table
                :data="paginatedEnteredStudents"
                border
                style="width: 100%"
                @selection-change="handleEnteredSelectionChange"
                size="mini"
                class="student-table"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="name" label="姓名" width="80"></el-table-column>
                <el-table-column prop="idCard" label="证件编号" width="200" show-overflow-tooltip></el-table-column>
                <el-table-column prop="gender" label="性别" width="70"></el-table-column>
                <el-table-column prop="phone" label="电话" width="130"></el-table-column>
                <el-table-column prop="qualification" label="学历" width="80">
                  <template slot-scope="scope">
                    <dict-tag
                      :options="dict.type.pxzx_xl"
                      :value="scope.row.qualification"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="unitName" label="单位" show-overflow-tooltip></el-table-column>
                <el-table-column prop="position" label="职务职级" width="120" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="120">
                  <template #default="scope">
                    <el-button
                      type="text"
                      size="small"
                      @click="handleExitClass(scope.row)"
                      class="operation-btn"
                    >
                      <i class="el-icon-arrow-right"></i> 退班
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
              <span>共 {{ enteredStudentsPage.total }} 条</span>
              <el-select
                v-model="enteredStudentsPage.pageSize"
                @change="handleEnteredSizeChange"
                size="small"
                class="page-size-select"
              >
                <el-option label="10条/页" value="10"></el-option>
                <el-option label="20条/页" value="20"></el-option>
                <el-option label="50条/页" value="50"></el-option>
              </el-select>
              <el-pagination
                @current-change="handleEnteredPageChange"
                :current-page="enteredStudentsPage.currentPage"
                :page-size="enteredStudentsPage.pageSize"
                layout="prev, pager, next, jumper"
                :total="enteredStudentsPage.total"
                size="small"
              ></el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TrainingStudentManagement',
  dicts:["pxzx_xl"],
  props: {
    classInfo: { type: Array, required: true, default: () => [] },
    studentPool: { type: Array, required: true, default: () => [] },
    enteredStudents: { type: Array, required: true, default: () => [] }
  },
  data() {
    return {
      // 内训学员库表单数据
      poolForm: {
        name: '',
        phone: '',
        idCard: '',
        userType:""
      },
      // 进班学员列表表单数据
      enteredForm: {
        name: '',
        idCard: '',
        phone: '',
        userType:""
      },
      // 选中的学员
      selectedPoolStudents: [],
      selectedEnteredStudents: [],
      // 项目筛选相关
      projectName: '',
      projectOptions: [],
      defaultProps: { children: 'children', label: 'label' },
      queryParams: { projectId: null },
      filterCollapsed: true, // 筛选区折叠状态
      // 分页配置
      studentPoolPage: { currentPage: 1, pageSize: 10, total: 0 },
      enteredStudentsPage: { currentPage: 1, pageSize: 10, total: 0 }
    };
  },
  computed: {
    // 内训学员库筛选后数据
    filteredStudentPool() {
      let result = [...this.studentPool];

      // 表单筛选
      if (this.poolForm.name.trim()) {
        const query = this.poolForm.name.toLowerCase();
        result = result.filter(student => student.name.toLowerCase().includes(query));
      }
      if (this.poolForm.phone.trim()) {
        result = result.filter(student => student.phone?.includes(this.poolForm.phone));
      }
      if (this.poolForm.idCard.trim()) {
        result = result.filter(student => student.idCard?.includes(this.poolForm.idCard));
      }
      // 项目筛选
      if (this.queryParams.projectId) {
        result = result.filter(student => student.projectId === this.queryParams.projectId);
      }

      return result;
    },
    // 内训学员库分页数据
    paginatedStudentPool() {
      this.studentPoolPage.total = this.filteredStudentPool.length;
      const start = (this.studentPoolPage.currentPage - 1) * this.studentPoolPage.pageSize;
      const end = start + this.studentPoolPage.pageSize;
      return this.filteredStudentPool.slice(start, end);
    },
    // 进班学员筛选后数据
    filteredEnteredStudents() {
      let result = [...this.enteredStudents];

      // 表单筛选
      if (this.enteredForm.name.trim()) {
        const query = this.enteredForm.name.toLowerCase();
        result = result.filter(student => student.name.toLowerCase().includes(query));
      }
      if (this.enteredForm.idCard.trim()) {
        result = result.filter(student => student.idCard?.includes(this.enteredForm.idCard));
      }
      if (this.enteredForm.phone.trim()) {
        result = result.filter(student => student.phone?.includes(this.enteredForm.phone));
      }

      return result;
    },
    // 进班学员分页数据
    paginatedEnteredStudents() {
      this.enteredStudentsPage.total = this.filteredEnteredStudents.length;
      const start = (this.enteredStudentsPage.currentPage - 1) * this.enteredStudentsPage.pageSize;
      const end = start + this.enteredStudentsPage.pageSize;
      return this.filteredEnteredStudents.slice(start, end);
    }
  },
  watch: {
  },
  mounted() {
  },
  methods: {
    // 筛选区折叠切换
    toggleFilter() {
      this.filterCollapsed = !this.filterCollapsed;
    },

    // 内训学员库搜索
    searchPoolStudents() {
      this.$emit('student-search', {
        ...this.poolForm,
        projectId: this.queryParams.projectId
      });
      this.studentPoolPage.currentPage = 1;
    },
    // 内训学员库表单重置
    resetPoolForm() {
      this.$refs.poolForm.resetFields();
      this.studentPoolPage.currentPage = 1;
      this.searchPoolStudents();
    },

    // 进班学员列表搜索
    searchEnteredStudents() {
      this.$emit('entered-student-search', this.enteredForm);
      this.enteredStudentsPage.currentPage = 1;
    },
    // 进班学员列表表单重置
    resetEnteredForm() {
      this.$refs.enteredForm.resetFields();
      this.enteredStudentsPage.currentPage = 1;
      this.searchEnteredStudents();
    },

    // 选择学员处理
    handlePoolSelectionChange(selection) {
      this.selectedPoolStudents = selection;
    },
    handleEnteredSelectionChange(selection) {
      this.selectedEnteredStudents = selection;
    },

    // 单个进班
    handleEnterClass(student) {
      if (student.paymentStatus !== "1") {
        this.$confirm(`${student.name}未缴费，确定让学员进班？`, '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$emit('student-enter', student);
          this.selectedPoolStudents = [];
        }).catch(action => {
          if (action === 'cancel' || action === 'close') {
            this.$message.info('已取消进班操作');
          }
        });
      } else {
        this.$emit('student-enter', student);
      }
    },

    // 批量进班
    handleBatchEnterClass() {
      if (this.selectedPoolStudents.length === 0) {
        this.$message.warning('请选择要进班的学员');
        return;
      }

      const unpaidStudents = this.selectedPoolStudents.filter(item => item.paymentStatus !== "1");
      if (unpaidStudents.length === 0) {
        this.$emit('students-batch-enter', this.selectedPoolStudents);
        this.selectedPoolStudents = [];
        return;
      }

      const studentNames = unpaidStudents.map(item => item.name).join(", ");
      this.$confirm(`${studentNames}未缴费，确定让学员进班？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$emit('students-batch-enter', this.selectedPoolStudents);
        this.selectedPoolStudents = [];
      }).catch(action => {
        if (action === 'cancel' || action === 'close') {
          this.$message.info('已取消进班操作');
        }
      });
    },

    // 单个退班
    handleExitClass(student) {
      this.$emit('student-exit', student);
    },

    // 批量退班
    handleBatchExitClass() {
      if (this.selectedEnteredStudents.length === 0) {
        this.$message.warning('请选择要退班的学员');
        return;
      }
      this.$emit('students-batch-exit', this.selectedEnteredStudents);
      this.selectedEnteredStudents = [];
    },

    // 查看学员详情
    handleManageStudent(student) {
      this.$emit('manage-student', student);
    },

    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      this.queryParams.projectId = data.id;
      this.searchPoolStudents();
    },

    // 分页方法
    handlePoolPageChange(val) {
      this.studentPoolPage.currentPage = val;
    },
    handlePoolSizeChange(val) {
      this.studentPoolPage.pageSize = val;
      this.studentPoolPage.currentPage = 1;
    },
    handleEnteredPageChange(val) {
      this.enteredStudentsPage.currentPage = val;
    },
    handleEnteredSizeChange(val) {
      this.enteredStudentsPage.pageSize = val;
      this.enteredStudentsPage.currentPage = 1;
    }
  }
};
</script>

<style scoped>
/* 整体样式 */
.training-class-student-management {
  margin: 20px;
}

/* 培训班信息区域 */
.class-info {
  margin-bottom: 20px;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.class-info h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f2f3f5;
  color: #1d2129;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  color: #666;
  margin-right: 5px;
  width: 100px;
  text-align: right;
}

.info-item .value {
  flex: 1;
  color: #1d2129;
}

/* 通用容器样式 */
.middle-section {
  margin-top: 10px;
}

.section-row {
  margin-bottom: 20px;
}

.student-container {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.student-container h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #f2f3f5;
  color: #1d2129;
}

/* 筛选区样式 */
.filter-toggle-btn {
  align-self: flex-start;
  padding: 4px 0;
  color: #1890ff;
  font-size: 13px;
}

.filter-toggle-btn:hover {
  color: #096dd9;
}

.filter-card {
  background: #fafbfc;
  border: 1px solid #f2f3f5;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filter-collapse-enter-active,
.filter-collapse-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.filter-collapse-enter,
.filter-collapse-leave-to {
  max-height: 0;
  padding: 0 12px;
  opacity: 0;
}

.filter-title {
  font-size: 14px;
  font-weight: 500;
  color: #4e5969;
  margin: 0;
}

.project-search-input {
  margin: 0 !important;
  border-radius: 4px;
}

.project-tree {
  width: 100%;
  height: 180px;
  overflow-y: auto;
  border: 1px solid #f2f3f5;
  border-radius: 4px;
  padding: 8px;
  background: #fff;
}

/* 搜索表单样式 */
.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 0;
}

.search-input {
  width: 220px;
}

.search-btn, .reset-btn {
  height: 32px;
  padding: 0 15px;
}

.batch-btn-item {
  margin-left: auto;
}

.batch-btn {
  height: 32px;
  background-color: #1890ff;
  border-color: #1890ff;
}

.batch-btn:hover {
  background-color: #096dd9;
  border-color: #096dd9;
}

.exit-btn {
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.exit-btn:hover {
  background-color: #e64e4e;
  border-color: #e64e4e;
}

/* 表格样式 */
.table-container {
  flex: 1;
  min-height: 500px;
  overflow: auto;
}

.student-table {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #f2f3f5;
}

.student-table .el-table__row {
  height: 40px;
}

.student-table .el-table__body tr:hover > td {
  background-color: #f7f8fa;
  box-shadow: inset 0 0 0 1px #e8eaed;
}

.student-table .el-table .cell {
  padding: 8px 12px;
  font-size: 13px;
  color: #1d2129;
}

.operation-btn {
  color: #1890ff;
  font-weight: 500;
  padding: 0 5px;
}

.operation-btn:hover {
  color: #096dd9;
}

/* 状态样式 */
.status-paid { color: #52c41a; }
.status-unpaid { color: #f56c6c; }
.status-pass { color: #52c41a; }
.status-fail { color: #f56c6c; }

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.pagination-container span {
  color: #666;
  font-size: 13px;
}

.page-size-select {
  width: 100px;
}

/* 滚动条优化 */
.table-container::-webkit-scrollbar,
.project-tree::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.table-container::-webkit-scrollbar-thumb,
.project-tree::-webkit-scrollbar-thumb {
  background-color: #c9cdcf;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover,
.project-tree::-webkit-scrollbar-thumb:hover {
  background-color: #aab0b5;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .info-grid { grid-template-columns: repeat(3, 1fr); }
  .search-input { width: 180px; }
}

@media (max-width: 992px) {
  .info-grid { grid-template-columns: repeat(2, 1fr); }
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  .search-input { width: 100%; }
  .batch-btn-item { margin-left: 0; }
}

@media (max-width: 768px) {
  .pagination-container { justify-content: center; flex-wrap: wrap; }
  .info-grid { grid-template-columns: 1fr; }
}
</style>
